<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :showClose="false"
      width="45%">
      <div>
        <template>
          <el-table
            :data="tableDatas"
            :cell-style="{'text-align':'center'}"
              :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
              border
              height="450"
              highlight-current-row
              @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              prop="typeCode"
              label="类型编码"
              width="180">
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="类型名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="typeExplain"
              label="类型说明">
            </el-table-column>
          </el-table>
        </template>
      </div>
      <span  class="dialog">
          <button class="button" type="primary" @click="submit" style=" cursor: pointer;">确 定</button>
          <button @click="dialogVisible = false" style=" cursor: pointer;">取 消</button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { postfuzhiapi } from '@/api/measure'
export default {
  name: 'MaintenanceFuzhi',
  props: {
    tableData: {
      type: Array
    },
    typeCode: {
      type: String
    }
  },
  data () {
    return {
      dialogVisible: false,
      tableDatas: [],
      val: ''
    }
  },

  mounted () {

  },

  methods: {
    handleCurrentChange (val) {
      this.val = val
    },
    async submit () {
      await postfuzhiapi({ copyFromMeterType: this.typeCode, meterType: this.val.typeCode })
      this.dialogVisible = false
      this.$message.success('复制成功')
      this.$emit('shuxing')
    }
  },
  watch: {
    deep: true,
    tableData (val) {
      if (val.length > 0) {
        this.tableDatas = this.tableData
      }
    },
    typeCode (val) {
      this.tableDatas = this.tableData.filter(ele => ele.typeCode !== val)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog{
  display: inline-block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.dialog button{
  width:70px;
  height:30px;
  background-color:#fff;
  border-radius:5px;
  border:1px solid #ccc;
  margin-left:5px;
}
.button{
  background-color: #169bd5 !important;
  color: #fff;
}
.neww{
  margin: 0 90px 0 10px;
  background-color: #fff !important;
  color: black !important;
  border: 1px solid #ccc !important;
}
.button{
  width: 63px;
  height: 32px;
  border-radius: 3px;
  color: #fff;
  border: 1px solid #ccc;
  background-color: #1890ff;
}
</style>
